import React from 'react';
import { Form, Input, Select, Button, Tooltip, message, Popover } from 'antd';
import './GoodsIndex.css';
import GoodsTable from './GoodsTable';
import axios from '../../../utils/http';
const { Option } = Select;
class GoodsIndex extends React.Component {
  state = {
    tableList: [] /* 表格渲染 */,
    /* 筛选部分 */
    searchGoodsName: '' /* 搜索商品名 */,
    searchGoodsCode: '' /* 搜索商品货号 */,
    searchGoodsClass: '' /* 搜索商品分类id */,
  };
  componentDidMount = () => {
    this.getAllGoods();
  };
  /* 获取所有商品 */
  getAllGoods = () => {
    axios({
      url: '/mm-goods/goods/queryGoods',
      method: 'get',
    }).then(({ data }) => {
      console.log(data);
      this.setData('tableList', data.data);
    });
  };
  setData = (name, val) => {
    this.setState({
      [name]: val,
    });
  };
  /* 表单项数据更改 */
  formChange = name => {
    return e => this.setData(name, e.target.value);
  };
  /* 加入回收站 */
  addRecyce = goodsList => {
    if (goodsList.length > 0) {
      axios({
        url: '/mm-goods/goods/hszGoods',
        method: 'post',
        data: {
          goodsIds: goodsList,
        },
      }).then(({ data }) => {
        if (data.code === 200) {
          message.success('加入回收站成功！商品可在回收站还原！');
          this.getAllGoods();
        }
      });
    } else {
      message.warning('请至少选择一件商品后再操作');
    }
  };
  /* 修改商品 */
  modify = id => {
    this.props.history.push({ pathname: '/Home/ShangPing/GoodsManage/ModifyGoods', state: { id } });
  };
  /* 改变商品上下架状态 */
  changeGoodsState = (state, id) => {
    let stus = state === true ? 1 : 0;
    axios({
      url: '/mm-goods/goods/updateSjzt',
      method: 'get',
      params: {
        goodsSjzt: stus,
        goodsId: id,
      },
    }).then(({ data }) => {
      let msg = state === true ? '上架成功！' : '下架成功！';
      if (data.code === 200) {
        message.success(msg);
        this.getAllGoods();
      }
    });
  };
  /* 筛选商品 */
  searchGoods = () => {
    let searchKey = {};
    if (this.state.searchGoodsCode) {
      searchKey.goodsId = this.state.searchGoodsCode;
    }
    if (this.state.searchGoodsName) {
      searchKey.goodsName = this.state.searchGoodsName;
    }
    if (this.state.searchGoodsClass) {
      searchKey.goodsCid = this.state.searchGoodsClass;
    }
    axios({
      url: '/mm-goods/goods/selGoods',
      method: 'POST',
      params: { ...searchKey },
    }).then(({ data }) => {
      this.setData('tableList', data.data);
    });
  };
  /* 重置筛选 */
  resetSearch = () => {
    this.setData('searchGoodsName', '');
    this.setData('searchGoodsCode', '');
    this.setData('searchGoodsClass', '');
    this.getAllGoods();
  };
  /* 更改商品排序 */
  updateGoodsSort = (id, sort) => {
    axios({
      url: '/mm-goods/goods/updatePx',
      method: 'get',
      params: {
        goodsId: id,
        goodsPx: sort,
      },
    }).then(({ data }) => {
      if (data.code === 200) {
        message.success('排序更改成功');
        this.getAllGoods();
      }
    });
  };
  changeXnxl = (id, val) => {
    axios({
      url: '/mm-goods/goods/updateXnxl',
      method: 'get',
      params: {
        goodsId: id,
        goodsXnxl: val,
      },
    }).then(({ data }) => {
      if (data.code === 200) {
        message.success('虚拟销量更改成功');
        this.getAllGoods();
      }
    });
  };
  render() {
    const methodMap = {
      changeGoodsState: this.changeGoodsState,
      modify: this.modify,
      addRecyce: this.addRecyce,
      updateGoodsSort: this.updateGoodsSort,
      changeXnxl: this.changeXnxl,
      getAllGoods: this.getAllGoods,
    };
    return (
      <>
        <div style={{ padding: '10px 20px' }}>
          <Form className="filter">
            <Form.Item label="商品名称">
              <Input
                value={this.state.searchGoodsName}
                onChange={this.formChange('searchGoodsName')}
                bordered={false}
                allowClear
                placeholder="商品名称"
              ></Input>
            </Form.Item>

            <Form.Item label="商品货号">
              <Input
                value={this.state.searchGoodsCode}
                onChange={this.formChange('searchGoodsCode')}
                bordered={false}
                allowClear
                placeholder="商品货号"
              ></Input>
            </Form.Item>

            <Form.Item>
              <Select
                onChange={val => this.setData('searchGoodsClass', val)}
                bordered={false}
                placeholder="选择分类"
                allowClear
                size="middle"
                defaultValue="全部分类"
                value={this.state.searchGoodsClass}
              >
                <Option value="" selected>
                  全部分类
                </Option>
                <Option value="2">生鲜水果</Option>
                <Option value="3">其他分类</Option>
              </Select>
            </Form.Item>

            <div className="searchBox">
              <Tooltip title="搜索" color="#687FFB">
                <Button
                  type="primary"
                  shape="circle"
                  icon={<span className="iconfont icon-sousuo"></span>}
                  onClick={this.searchGoods}
                ></Button>
              </Tooltip>
              <Tooltip title="重置" color="#687FFB">
                <Button
                  shape="circle"
                  icon={<span className="iconfont icon-zhongzhishaixuan"></span>}
                  onClick={this.resetSearch}
                ></Button>
              </Tooltip>
            </div>
          </Form>
        </div>
        <GoodsTable tableList={this.state.tableList} {...methodMap}></GoodsTable>
      </>
    );
  }
}
export default GoodsIndex;
